<template>
  <div class="wrapper">
    <div :id="id" :style="{ height: height, width: width }" />
  </div>
</template>

<script>
import echarts from 'echarts'
import uuidv1 from 'uuid/v1'

export default {
  components: {
  },
  // 可通过调用的父级进行动态调整
  props: {
    // 图形宽度
    width: {
      type: String,
      default: '100%'
    },
    // 图形高度
    height: {
      type: String,
      default: '100%'
    },
  },
  data() {
    return {
      myChart: null, // 图表元素
      hasData: false,
      id: '', // 元素id
    }
  },
  computed: {
    // 全局-是否柱状图标识
    isBar() {
      return this.$store.state.home.isBar
    }
  },
  watch: {},
  created() {
    this.id = '2225fff' // 保证id是唯一的
  },
  mounted() {
    // 1.加载图表元素
    this.myChart = echarts.init(document.getElementById(this.id))
  },
  activated() {
    this.initChart
  },
  updated() {},
  destroyed() {
    if (!this.myChart) {
      return
    }
    // 1.销毁echarts实例
    this.myChart.dispose()
    this.myChart = null
    // 2.移除resize事件
    window.removeEventListener('resize', this.chartResize)
  },
  methods: {
    initChart(baseOptions) {

      // 1.判断有没有实例化，如果没有就重新实例化图表
      if (!this.myChart) {
        this.myChart = echarts.init(document.getElementById(this.id))
      }

        this.myChart.setOption(baseOptions)
        // 3.图表自适应
        window.addEventListener('resize', this.chartResize)
      },


    // 判断数据是否为空
    isEmptyObject(obj) {
      return Object.keys(obj).length === 0
    },
    showLoading() {
      this.myChart.showLoading(loading)
    },
    hideLoading() {
      this.myChart.hideLoading()
    },
    // 图表重绘方法
    chartResize() {
      this.myChart && this.myChart.resize()
    }
  }
}
</script>
<style scoped>
.wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>
